import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Descriptions,
  Col,
  Row,
  Radio,
  Input,
  Button,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const { Item } = Descriptions;
interface PushProps extends FormComponentProps {
  dispatch: Dispatch<any>;
  match: { params: { fid: number } },
  loading: boolean;
  submitting: boolean;
  pushDetail: any;
}

@connect(({
  partnerFranchiseePush,
  loading,
}: any) => ({
  pushDetail: partnerFranchiseePush,
  loading: loading.effects['partnerFranchiseePush/fetch'],
}))

class Push extends Component<PushProps> {
  columns = [
    {
      title: '社区名称',
      dataIndex: 'name',
    },
    {
      title: '物业',
      dataIndex: 'property',
    },
    {
      title: '地区',
      dataIndex: 'area',
    },
  ];

  componentDidMount() {
    const { dispatch, match: { params: { fid: fcs_id } } } = this.props;
    dispatch({
      type: 'partnerFranchiseePush/fetch',
      payload: { fcs_id },
    });
  }

  componentDidUpdate(prevProps: any) {
    const { pushDetail = {} } = this.props;

    if (!_.isEqual(prevProps.pushDetail, pushDetail)) {
      const fcs_info = pushDetail.fcs_info || {};
      const { form: { setFieldsValue } } = this.props;
      setFieldsValue({
        user_wxapp_id: pushDetail.user_wxapp_id,
        page: pushDetail.page,
        secret: pushDetail.secret,
        fcs_id: fcs_info.fcs_id,
        enable_push: fcs_info.enable_push || 0,
        push_url: fcs_info.push_url,
        push_token: fcs_info.push_token,
      });
    }
  }

  validate = () => {
    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll((error, values) => {
      if (error) return;
      const { match: { params: { fid } } } = this.props;
      values.fcs_id = fid;

      const { dispatch } = this.props;
      dispatch({
        type: 'partnerFranchiseePush/save',
        payload: values,
      });
    });
  }

  test = () => {
    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll((error, values) => {
      if (error) return;

      const params = _.pick(values, 'push_url', 'push_token');

      const { dispatch } = this.props;
      dispatch({
        type: 'partnerFranchiseePush/test',
        payload: params,
      });
    });
  }

  render() {
    const {
      form: { getFieldDecorator },
      pushDetail = {},
      loading,
    } = this.props;

    const fcsInfo = pushDetail.fcs_info || {};

    return (
      <Fragment>
        <PageHeader />

        <Form hideRequiredMark className="tableListForm marginT20 marginL24 marginR24">
          <Row gutter={16}>
            <Col md={6} sm={24}>
              <Card title="基本信息" bordered={false}>
                <Descriptions style={{ marginBottom: 6 }}>
                  <Item label="商户名称" span={3}>{fcsInfo.contact}</Item>
                </Descriptions>
                <Descriptions style={{ marginBottom: 6 }}>
                  <Item label="　联系人" span={3}>{fcsInfo.name}</Item>
                </Descriptions>
                <Descriptions>
                  <Item label="手机号码" span={3}>{fcsInfo.phone}</Item>
                </Descriptions>
              </Card>
            </Col>
            <Col md={18} sm={24}>
              <Card title="配置信息" bordered={false}>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                  <Col md={12} sm={24}>
                    <div
                      style={{
                        padding: '20px 20px 12px 20px',
                        border: '1px dashed rgba(0,0,0,0.15)',
                      }}
                    >
                      <div className="subtitle marginB8">商户自有配置</div>
                      <Form.Item
                        label="推送订单事件"
                        colon={false}
                        style={{ marginBottom: 20 }}
                      >
                        {getFieldDecorator('enable_push')(
                          <Radio.Group>
                            <Radio value={0}>关闭</Radio>
                            <Radio value={1}>开启</Radio>
                          </Radio.Group>,
                        )}
                      </Form.Item>
                      <Form.Item
                        label="　服务器URL"
                        colon={false}
                        style={{ marginBottom: 20 }}
                      >
                        {
                          getFieldDecorator('push_url', {
                            rules: [{ required: true, message: '请输入服务器URL' }],
                          })(<Input />)
                        }
                      </Form.Item>
                      <Form.Item
                        label="　 秘钥Token"
                        colon={false}
                        style={{ marginBottom: 12 }}
                      >
                        {
                          getFieldDecorator('push_token', {
                            rules: [{ required: true, message: '请输入秘钥Token' }],
                          })(<Input />)
                        }
                      </Form.Item>
                    </div>
                  </Col>
                  <Col md={12} sm={24}>
                    <div
                      style={{
                        padding: '20px 20px 12px 20px',
                        border: '1px dashed rgba(0,0,0,0.15)',
                      }}
                    >
                      <div className="subtitle marginB8">近邻宝小程序配置</div>
                      <Form.Item
                        label="　取件小程序ID"
                        colon={false}
                        style={{ marginBottom: 20 }}
                      >
                        {
                          getFieldDecorator('user_wxapp_id', {
                            rules: [{ required: true, message: '请输入小程序ID' }],
                          })(<Input />)
                        }
                      </Form.Item>
                      <Form.Item
                        label="取件小程序URL"
                        colon={false}
                        style={{ marginBottom: 20 }}
                      >
                        {
                          getFieldDecorator('page', {
                            rules: [{ required: true, message: '请输入小程序URL' }],
                          })(<Input />)
                        }
                      </Form.Item>
                      <Form.Item
                        label="　　　签名秘钥"
                        colon={false}
                        style={{ marginBottom: 12 }}
                      >
                        {
                          getFieldDecorator('secret', {
                            rules: [{ required: true, message: '请输入签名秘钥' }],
                          })(<Input />)
                        }
                      </Form.Item>
                    </div>
                  </Col>
                </Row>
                <div style={{ margin: '20px 0' }}>
                  <Button type="primary" onClick={this.test}>
                    验证配置
                  </Button>
                  <Button
                    type="primary"
                    style={{ marginLeft: 16 }}
                    onClick={this.validate}
                    loading={loading}
                  >
                    保存配置
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
        </Form>
      </Fragment>
    );
  }
}

export default Form.create<PushProps>()(Push);
